<template>
  <!-- 附加被保人 -->
  <div class="text-[12px]">
    <div v-for="itemlist in list" class=" ">
      <div class="flex items-center justify-between pt-[15px] px-[15px]">
        <div class="flex items-center">
          <div>附加被保人类型</div>
          <div
            class="flex items-center ml-[25px]"
            v-for="item in itemlist.titleList"
          >
            <div class="flex items-center">
              <img
                :src="getAssetsFile('mine/dis.png')"
                class="w-[14px] h-[14px]"
              />

              <div class="ml-[10px]">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-[15px] px-[15px]">
        <div
          v-for="item in itemlist.contentList"
          class="border-b border-[#ECECEC] py-[10px] flex items-center w-full"
        >
          <div class="flex items-center w-full">
            <div class="text-[12px] min-w-[100px]">{{ item.title }}</div>
            <div class="ml-[10px] flex items-center w-full">
              <div>{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full h-[15px] bg-[#FCFCFC]" v-if="list.length > 1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl";
import { ref } from "vue";

const list = ref([
  {
    titleList: [
      {
        name: "单位",
      },
    ],
    contentList: [
      {
        title: "附加被保人性质",
        value: "业主",
      },
      {
        title: "姓名",
        placeholder: "请输入姓名",
        value: "",
        rules: "请输入姓名",
      },
      {
        title: "证件类型",
        value: "身份证",
      },
      {
        title: "证件号码",
        placeholder: "请输入证件号码",
        value: "",
        rules: "请输入证件号码",
      },
    ],
  },
]);
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 12px !important;
}
</style>
